<!DOCTYPE html>
<title>media controls overlay play button</title>
<script src="../../../../resources/run-after-layout-and-paint.js"></script>
<script src="../../../../media/media-controls.js"></script>
<script src="../../../../media/controls/overlay-play-button.js"></script>
<meta name="color-scheme" content="light dark">

<body style="padding-top: 200px; padding-left: 100px">
  <script>
    // Make sure the overlay play button is turned on, as it's typically off
    // unless we're dealing with Android. This call has to be before attaching video element.
    let cachedPlayButtonSetting = internals.runtimeFlags.mediaControlsOverlayPlayButtonEnabled;
    internals.runtimeFlags.mediaControlsOverlayPlayButtonEnabled = true;
  </script>
  <video controls width="320" height="240"></video>
  <script>
    function waitForVideoPresentation(video) {
      return new Promise(resolve => {
        video.requestVideoFrameCallback(resolve);
      });
    }
    if (window.testRunner)
      testRunner.waitUntilDone();

    let video = document.querySelector('video');
    enableTestMode(video);
    video.src = "../../../../media/content/test.ogv";
    let videoPresentation = waitForVideoPresentation(video);
    video.addEventListener('loadedmetadata', () => {
      videoPresentation.then(() => {
        runAfterLayoutAndPaint(() => {
          testRunner.notifyDone();
        });
      });
    });
    internals.runtimeFlags.mediaControlsOverlayPlayButtonEnabled = cachedPlayButtonSetting;
  </script>
</body>
